<template>
  <n-modal
    :mask-closable="false"
    :close-on-esc="false"
    :title="title"
    :show="show"
    preset="card"
    @close="close"
    :on-after-enter="init"
    :on-after-leave="destroy"
    style="width: 800px"
  >
    <n-form label-placement="left" label-width="auto" ref="formRef" :model="form" :rules="rules">
      <n-grid :cols="2" x-gap="2">
        <n-form-item-grid-item :span="1" label="父级菜单" path="appId" show-require-mark>
          <n-select v-model:value="form.appId" :options="appOptions" disabled />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="主键" path="id" show-require-mark>
          <n-input v-model:value="form.id" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="编码" path="code" show-require-mark>
          <n-input v-model:value="form.code" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="名称" path="name" show-require-mark>
          <n-input v-model:value="form.name" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="状态" path="status" show-require-mark>
          <n-radio-group v-model:value="form.status">
            <n-radio
              :label="item.label"
              :value="item.value"
              :key="item.value"
              v-for="item in codeStore.getCodesByDict(_Dict.Status)"
            />
          </n-radio-group>
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="排序">
          <n-input-number v-model:value="form.ordIdx" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="2" label="备注">
          <n-input type="textarea" v-model:value="form.remark" />
        </n-form-item-grid-item>
      </n-grid>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="close">关闭</n-button>
        <n-button type="info" @click="handleConfirmOnClick">确认</n-button>
      </n-space>
    </template>
  </n-modal>
</template>
<script lang="ts" setup>
import { getMenu, postAndPutMenu } from '@/api/base/Menu'
import { getAppList } from '@/api/base/App'

const codeStore = useCodeStore()

const state = reactive({
  form: {} as BaseMenuPO,
  appOptions: [] as SelectOption[]
})

const { form, appOptions } = toRefs(state)

const props = defineProps({
  title: {
    type: String
  },
  show: {
    type: Boolean
  },
  menu: {
    type: Object as PropType<BaseMenuVO>
  },
  appId: {
    type: String
  }
})

const emits = defineEmits<{
  (e: 'handleCloseOnClick'): void
  (e: 'handleSelectOnClick'): void
}>()

const formRef = ref()

const rules: FormRules = {
  appId: [
    {
      required: true
    }
  ],
  id: [
    {
      required: true
    }
  ],
  code: [
    {
      required: true
    }
  ],
  name: [
    {
      required: true
    }
  ],
  status: [
    {
      required: true
    }
  ]
}

const init = async () => {
  const { data: appList } = await getAppList()
  state.appOptions = appList.map((ele) => ({
    label: ele.name,
    value: ele.id
  }))
  if (props.appId) {
    state.form.appId = props.appId
    return
  }
  const { data } = await getMenu(props.menu!.id)
  state.form = data
}

const handleConfirmOnClick = async () => {
  formRef.value?.validate(async (errors: any) => {
    if (errors) return
    await postAndPutMenu(state.form)
    select()
    close()
  })
}

const select = () => {
  emits('handleSelectOnClick')
}

const close = () => {
  emits('handleCloseOnClick')
}

const destroy = () => {
  state.form = {} as BaseMenuPO
}
</script>
<style></style>
